<template>
	<div>
		<div class="container">
			<!-- 搜索栏 -->
			<div style="padding: 0px">
				<van-search v-model="value" show-action placeholder="想找什么车" @search="onSearch" background="#4fc08d">
					<template #action>
						<div @click="onSearch">搜索</div>
					</template>
				</van-search>
			</div>

			<!-- 轮播 -->
			<div>
				<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
					<van-swipe-item>
						<van-image fit="contain" src="http://112.124.20.153/car/car_img/8/car.jpg" />
					</van-swipe-item>
					<van-swipe-item>
						<van-image fit="contain" src="http://112.124.20.153/car/car_img/11/car.jpg" />
					</van-swipe-item>
					<van-swipe-item>
						<van-image fit="contain" src="http://112.124.20.153/car/car_img/12/car.jpg" />
					</van-swipe-item>s
				</van-swipe>
			</div>

			<!-- 方格 -->
			<div>
				<van-grid column-num="3">
					<van-grid-item to="/car">
						<img class="van-img" src="../assets/car.png" />
						<span>选车</span>
					</van-grid-item>
					<van-grid-item to="/car/newcarpage">
						<img class="van-img" src="../assets/new.png" />
						<span>最新车辆</span>
					</van-grid-item>
					<van-grid-item @click="onSellerEnter">
						<img class="van-img" src="../assets/seller.png" />
						<span>店家入口</span>
					</van-grid-item>
				</van-grid>
			</div>

			<!-- 最新车辆 -->
			<div class="car">
				<van-tag type="primary" mark size="large" style="width: 60px; ">最新车辆</van-tag>
				<van-loading v-show="cars.length ==0?true:false" type="spinner" color="#1989fa" />
				<div class="car-list" v-for="(car,index) in cars" v-bind:key="index" style="display: flex; flex-direction: column;">
					<div style="display: flex; flex-direction: row;" @click="onCarDetail(car.carId)">
						<div>
							<van-image width="160px" height="100px" fit="contain" v-bind:src="car.titleImg" />
						</div>
						<div style="display: flex; flex-direction: column; justify-content: space-between">
							<p class="car-list-title">{{car.brand}} {{car.series}} {{car.years}} {{car.gearBox}} {{car.engine}}
								{{car.edition}}</p>
							<p class="car-list-info">{{car.licensingTime}}/{{car.tableMileage}}</p>
							<p class="car-list-price">{{car.totalPrice}} {{car.downPayment}}</p>
						</div>
					</div>
				</div>
				<p>请点击"最新车辆"查看更多...</p>
			</div>
			<!-- 底部备案信息 -->
			<div style="background-color: #969799;">
				<van-row type="flex" justify="center">
					<van-col>
						<p style="font-size: 15px; margin-bottom: 3px;">© 2020 zhaoguangcloud.cn — All Rights Reserved.</p>
						<p style="font-size: 15px; margin-top: 3px;"> 备案号：<a href="http://www.beian.miit.gov.cn">桂ICP备19000265号</a></p>
					</van-col>
				</van-row>
			</div>

		</div>
		<CarTabbar :active="tabbarName"></CarTabbar>
	</div>
</template>

<script>
	import {
		Dialog
	} from 'vant';

	export default {
		data() {
			return {
				tabbarName: "home",
				value: '',
				shopId: 0,
				isLogin: false,
				cars: []
			}
		},
		methods: {
			onSearch() {
				console.log("搜索..." + this.value)
			},
			onCarDetail(carId) {
				this.$router.push({
					path: "/car/cardetail",
					query: {
						carId: carId
					}
				})
			},
			onSellerEnter() {
				if (this.isLogin) {
					if (this.shopId === 0) {
						Dialog.alert({
							message: '您不是店家，不能进行此操作',
						})
					} else {
						this.$router.push('/shophome')
					}
				} else {
					Dialog.alert({
						message: '未登录或登录已失效，请重新登录',
					})
				}

			}
		},
		mounted() {
			let user = this.$cookies.get('user');
			if (user != null) {
				this.isLogin = true;
				this.shopId = user.shopId;
			}

			this.$axios({
				method: 'post',
				url: '/car/homeNewCar'
			}).then((resp) => {
				if (resp.data.status == 200) {
					this.cars = resp.data.obj;
				} else {
					Notify({
						type: 'danger',
						message: '获取车辆失败'
					})
					this.$router.back()
				}
			})

		}
	}
</script>

<style scoped>
	.container {
		margin-bottom: 60px;
	}

	.my-swipe {
		height: 263px;
	}

	.car {
		display: flex;
		flex-direction: column;
	}

	.van-image {
		margin: 10px 5px 5px 5px;
	}

	.car-list {
		display: flex;
		flex-direction: row;
	}

	.car-list-title {
		text-align: left;
		font-size: 16px;
		font-weight: bold;
		margin: 10px 0px;
	}

	.car-list-info {
		text-align: left;
		color: #969799;
		font-size: 14px;
		margin: 0px;
	}

	.car-list-price {
		text-align: left;
		color: #ff0000;
		font-size: 18px;
		margin: 10px 0px;
	}

	.van-img {
		weight: 3.75rem;
		height: 3.75rem;
	}
</style>
